class MenuQuery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {menuList: []};
    }

    componentDidMount() {
        this.updateMenuList();
    }

    updateMenuList(){
        postJson("/menu/query.x",null,(data)=>{
            let menuListOrdered = [];
            reorderParents(data.data,null,menuListOrdered,"menuPar","menuCode");
            this.setState({menuList : menuListOrdered});
        });
    }

    getMenu(menuCode){
        for(let i=0;i<this.state.menuList.length;i++){
            if(this.state.menuList[i].menuCode == menuCode)
                return this.state.menuList[i];
        }
    }

    modify(menu){
        if(menu.menuPar) {
            let menuPar = this.getMenu(menu.menuPar);
            menu.menuParName = menuPar.menuName;
        }
        this.refs.modifyModal.setState({menu: menu});

        if(menu.type == 0)
            this.refs.modifyModal.show({title: '修改菜单',modify:true});
        else
            this.refs.modifyModal.show({title: '修改权限',modify:true,permission:true});
    }


    addPermission(){
        this.refs.modifyModal.show({title:'新增权限',permission:true});
    }

    delete(menuCode){
        parent.layer.confirm('确实要删除该菜单信息？',(index)=>{
            let param = {};
            param.menuCode = menuCode;
            postJson("/menu/delete.x",$.param(param), ()=>{
                parent.layer.msg("删除成功");
                this.refs.table.removeTreeTableNode(menuCode);
            });
            parent.layer.close(index);
        });
    }

    modalClose(){
        this.refs.table.removeTreeTable();
        this.updateMenuList();
    }

    render(){
        return (
            <Frame header="菜单列表" headerBtns={
                [
                    <HeaderBtn onClick={()=>{
                        this.refs.table.collapseAll()}}><i className="fa fa-chevron-up"/></HeaderBtn>,
                    <HeaderBtn onClick={()=>{this.refs.table.expandAll()}}><i className="fa fa-chevron-down"/></HeaderBtn>,
                    <HeaderBtn onClick={()=>{this.refs.modifyModal.show()}}>新增菜单</HeaderBtn>,
                    <HeaderBtn onClick={()=>this.addPermission()}>新增权限</HeaderBtn>
                ]}>
                <Form>
                    <Table expandable="true" ref="table">
                        <thead>
                        <tr>
                            <th>菜单名称</th>
                            <th>菜单级别</th>
                            <th>链接地址</th>
                            <th>权限字串</th>
                            <th>是否可见</th>
                            <th>排序编号</th>
                            <th>操作 </th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.menuList.map((menu)=>{
                                return (
                                <tr data-tt-id={menu.menuCode} data-tt-parent-id={menu.menuPar}>
                                    <td>{menu.type != 0?<i className="fa fa-key" style={{marginRight:5}}></i>:'' }{menu.menuName}</td>
                                    <td>{menu.menuLev}</td>
                                    <td>{menu.menuUrl}</td>
                                    <td>{menu.permission}</td>
                                    <td>{menu.menuView}</td>
                                    <td>{menu.menuIndex}</td>
                                    <td>
                                        <Button size="xs" btnType="normal" onClick={()=>this.modify(menu)}>修改</Button>
                                        <Button size="xs" btnType="danger" onClick={()=>this.delete(menu.menuCode)}>删除</Button>
                                    </td>
                                </tr>
                                )
                            })
                        }
                        </tbody>
                    </Table>
                </Form>
                <MenuForSaveModal ref="modifyModal" onClose={()=>this.modalClose()}></MenuForSaveModal>
                <Modal modalType="iframe" ref="modifyPermsModal" area={['450px','520px']} title="菜单修改"></Modal>
            </Frame>
        )
    }
}

ReactDOM.render(<MenuQuery/>,document.getElementById("query"));